<template>
	<view>
		<!-- 秒杀楼层 -->
		<view class="seckill-section m-t">
			<view class="s-header">
				<image class="s-img" src="/static/images/index/secskill-img.jpg" mode="widthFix"></image>
				<text class="tip">8点场</text>
				<text class="hour timer">07</text>
				<text class="minute timer">13</text>
				<text class="second timer">55</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<scroll-view class="floor-list" scroll-x>
				<view class="scoll-wrapper">
					<view 
						v-for="(item, index) in dataList" :key="index"
						class="floor-item"
						@click="navToDetailPage(item)"
					>
						<image :src="item.mainImage" mode="aspectFill"></image>
						<view class="title clamp">{{item.name}}</view>
						<view class="price">￥{{item.price}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"scrollXGoods",
		props:{
			showHeader:{
				type:Boolean,
				default:true
			},
			dataList:{
				type:Array,
				default:[]
			}
		},
		data() {
			return {
			};
		},
		methods:{
			navToDetailPage(item){
				this.$tab.navigateTo(`/pages/product/product?product_id=${item.id}`)
			}
		}
	}
</script>

<style scoped lang="scss">
	/* 秒杀专区 */
	.seckill-section{
		padding: 4upx 30upx 24upx;
		background: #fff;
		.s-header{
			display:flex;
			align-items:center;
			height: 92upx;
			line-height: 1;
			.s-img{
				width: 140upx;
				height: 30upx;
			}
			.tip{
				font-size: 28upx;
				color: #909399;
				margin: 0 20upx 0 40upx;
			}
			.timer{
				display:inline-block;
				width: 40upx;
				height: 36upx;
				text-align:center;
				line-height: 36upx;
				margin-right: 14upx;
				font-size: 26upx;
				color: #fff;
				border-radius: 2px;
				background: rgba(0,0,0,.8);
			}
			.icon-you{
				font-size: 32upx;
				color: #909399;
				flex: 1;
				text-align: right;
			}
		}
		.floor-list{
			white-space: nowrap;
		}
		.scoll-wrapper{
			display:flex;
			align-items: flex-start;
		}
		.floor-item{
			width: 150upx;
			margin-right: 20upx;
			font-size: 26upx;
			color: #303133;
			line-height: 1.8;
			.title{
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				width: 150upx;
			}
			image{
				width: 150upx;
				height: 150upx;
				border-radius: 6upx;
			}
			.price{
				color: #fa436a;
			}
		}
	}
</style>